<template>
    <div class="dict_main">
        <div class="safelist-search-container mb16">
            <a-row class="search-row">
                <a-col :span="6" class="mr8">
                    <a-input v-model:value="state.searchData.name" placeholder="请输入字典名称" />
                </a-col>
                <a-col :span="6">
                    <a-button type="primary" class="mr8" @click="handleSearch">搜索</a-button>
                    <a-button type="primary" ghost @click="handleEmpty">重置</a-button>
                </a-col>
            </a-row>
            <a-row>
                <a-button type="primary" class="mr8" ghost @click="expandRows(true)">展开全部</a-button>
                <a-button type="primary" class="mr8" ghost @click="expandRows(false)">折叠全部</a-button>
                <a-button type="primary"  class="nmc-add-btn-primary" @click="addMenu()" v-btn-permission:2="'admin:dictType:add'">新增</a-button>
            </a-row>
        </div>
        <div class="safelist-table-container restrict-atable">
            
            <a-table
                :columns="tableProps.columns"
                :data-source="tableProps.dataSource"
                :row-key="record => record.id"
                
                :defaultExpandAllRows="state.defaultExpandAllRows"
                :expandedRowKeys="state.expandedRowKeys"
                @expandedRowsChange="expandedRowsChange"
                :pagination="false"
                :scroll="{y: state.tableHeight}"
            >
                <template #bodyCell="{ column, text, record }">
                    <div v-if="column.key === 'action'" class="action_box">
                        <span @click="edieMenu(record)" v-btn-permission:2="'admin:dictData:edit'">编辑</span>
                        <span @click="addMenu(record)" v-if="record.type!=='2'" v-btn-permission:2="'admin:dictData:add'">新增</span>
                        <span class="delete_btn" @click="deleteMenu(record)" v-btn-permission:2="'admin:dictType:delete'">删除</span>
                    </div>
                    <div v-if="column.dataIndex === 'type'">
                        {{text==='1'?'目录':'菜单'}}
                    </div>
                    <div v-if="column.dataIndex === 'status'" :class="text=='1'?'show':'none'">
                        {{text=='1'?'启用':'停用'}}
                    </div>
                </template>
            </a-table>
        </div>
    </div>
    <modalForm ref="modalFormRef" @success="init" :treeData="tableProps.dataSource"></modalForm>
</template>

<script setup>
import {createVNode, onMounted, reactive, ref,defineOptions} from 'vue'
import {dictDelete, dictDataDelete, dictTypeListAll} from '@/service/api'
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import {message, Modal} from 'ant-design-vue';
import modalForm from './modalForm.vue'
import {useMainStore} from "@/store";

defineOptions({
    name:'dataDict',
});

const modalFormRef = ref()
const tableProps = ref({
    columns: [
        {
            title: '字典项名称',
            dataIndex: 'name',
            width: 200
        },
        {
            title: 'code',
            dataIndex: 'code'
        },
        {
            title: '值',
            dataIndex: 'value'
        },
        {
            title: '排序',
            dataIndex: 'sort'
        },
        {
            title: '状态',
            dataIndex: 'status'
        },
        {
            title: '更新时间',
            dataIndex: 'updateTime',
            width: '240px'
        },
        {
            title: '操作',
            key: 'action',
            width: '160px'
        }
    ],
    dataSource: [], //列表数据
})
const mainStore = useMainStore()
const state = reactive({
    searchData: {
        name: null
    },//搜索数据
    defaultExpandAllRows: true,//初始时，是否展开所有行
    expandedRowKeys: [], // 打开的行
    visible: false,
    tableHeight: 0
})

onMounted(() => {
    init()
    state.tableHeight = document.getElementsByClassName('safelist-table-container')[0].offsetHeight - 32
})

//获取列表数据
const init = () => {
    let params = {
        name: state.searchData.name
    }
    dictTypeListAll(params).then(res => {
        if (res && res.status === "000_0000_0000") {
            // mainStore.SET_DICT(res.data)
            tableProps.value.dataSource = res.data
            state.expandedRowKeys = []
            getId(tableProps.value.dataSource)
        } else {
            tableProps.value.dataSource = []
        }
    })
}

//搜索
const handleSearch = () => {
    init()
}

//重置
const handleEmpty = () => {
    state.searchData = {
        name: null
    }
    init()
}

// 新增菜单
const addMenu = (record) => {
    modalFormRef.value.showModal({
        title: '新增字典',
        typeId: record?.id
    })
}

// 编辑菜单
const edieMenu = (record) => {
    modalFormRef.value.showModal({
        title: '编辑字典',
        typeId: record?.pid,
        ...record
    })
}

// 展开行变化
const expandedRowsChange = (key) => {
    state.expandedRowKeys=key
}

// 确认删除菜单
const deleteMenu = (record) => {
    console.log(record,'dddd')
    Modal.confirm({
        title: '确认提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: '确定删除该字典吗？',
        okText: '确认',
        cancelText: '取消',
        onOk() {
            return new Promise((resolve, reject) => {
                if(record.pid && record.pid!=='0'){
                    dictDataDelete({"id": record.id}).then(res=>{
                        if(res && res.status === "000_0000_0000") {
                            message.success('删除成功');
                            init()
                            resolve()
                        }
                    }).catch(err=>{
                        init()
                        resolve()
                        // message.error(err.message);
                    })
                }else{
                    dictDelete({"id": record.id}).then(res=>{
                        if(res && res.status === "000_0000_0000") {
                            message.success('删除成功');
                            init()
                            resolve()
                        }
                    }).catch(err=>{
                        init()
                        resolve()
                        // message.error(err.message);
                    })
                }

            })
        },
    });
}

// 展开收起所有行
const expandRows = (flag) => {
    if(flag) {
        getId(tableProps.value.dataSource)
    }else{
        state.expandedRowKeys = []
    }
}

const getId = (arr) => {
    arr.forEach(item=>{
        state.expandedRowKeys.push(item.id)
        if(item.children && item.children.length>0) {
            getId(item.children)
        }
    })
}

const handleOk = () =>{
    console.log('handleOk')
}

const handleCancel = () =>{
    console.log('handleCancel')
}
</script>
<style lang="less" scoped>
.dict_main{
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.safelist-table-container{
    height: calc(100% - 48px);
    overflow: hidden;
    .action_box{
        display: flex;
        font-size: 14px;
        color: #00cccc;
        span{
            cursor: pointer;
            margin-right: 8px;
        }
        .delete_btn{
            color: #FF0000;
        }
    }
    .show{
        width: 40px;
        height: 18px;
        // background: #0E3E6C;
        border-radius: 4px;
        color:#2CB071;
        line-height: 18px;
        text-align: center;
    }
    .none{
        width: 40px;
        height: 18px;
        background: rgba(255, 255, 255, 0.14);
        border-radius: 4px;
        line-height: 18px;
        text-align: center;
        // color: rgba(255,255,255,0.25);
    }
}

</style>
